<template>
  <el-dialog
    title="营业准备规则关联物料"
    v-if="modelValue.visible"
    v-model="modelValue.visible"
    width="800px"
    :before-close="handleBeforeClose"
  >
    <!-- 温馨提示 -->
    <div class="tips">
      温馨提示：在营业准备时，创建一个规则组，设置多个物料的出料规则，应用到不同机型的机台
    </div>

    <!-- 顶部操作区：选择物料 + 时长 + 克数 + 保存 -->
    <div class="top-section">
      <el-form label-width="140px" label-position="left">
        <!-- 选择排出物料 -->
        <el-form-item label="选择排出物料">
          <el-select
            v-model="selectedMaterial"
            placeholder="请选择排出物料"
            style="width: 200px"
          >
            <el-option label="林里空山乌龙茶" value="M0034" />
            <el-option label="林里栀子绿茶" value="M0035" />
            <!-- 更多选项可根据需要动态加载 -->
          </el-select>
        </el-form-item>

        <!-- 排出物料时长 -->
        <el-form-item label="排出物料时长">
          <div class="number-input-wrapper">
            <!-- <el-button @click="decreaseTime">−</el-button> -->
            <el-input-number v-model="duration" :min="0" />
            <span style="margin-left: 12px">毫秒</span>
            <!-- <el-button @click="increaseTime">+</el-button> -->
          </div>
        </el-form-item>

        <!-- 排出物料克数 -->
        <el-form-item label="排出物料克数">
          <div class="number-input-wrapper">
            <!-- <el-button @click="decreaseWeight">−</el-button> -->
            <el-input-number v-model="weight" :min="0" />
            <span style="margin-left: 12px">克</span>
            <!-- <el-button @click="increaseWeight">+</el-button> -->
          </div>
        </el-form-item>

        <!-- 保存按钮 -->
        <el-form-item>
          <el-button type="primary" @click="handleSave">保存</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 已设置的物料列表 -->
    <div class="materials-section">
      <h3>已设置的物料列表</h3>
      <div class="list-controls">
        <el-select
          style="width: 320px; margin-right: 12px"
          v-model="selectedFilterMaterial"
          placeholder="请选择物料"
        >
          <el-option label="全部" value="" />
          <el-option label="林里椰子水" value="M0023" />
          <!-- 可动态加载更多 -->
        </el-select>
        <el-button x type="primary" @click="handleQuery">查询</el-button>
      </div>

      <!-- el-table 展示物料列表 -->
      <el-table
        border
        :data="materialList"
        style="width: 100%; margin-top: 16px"
      >
        <el-table-column prop="code" label="物料编码" min-width="140" />
        <el-table-column prop="name" label="物料名称" min-width="200" />
        <el-table-column prop="time" label="时间" width="130">
          <template #default="{ row }"> {{ row.time }}毫秒 </template>
        </el-table-column>
        <el-table-column prop="weight" label="重量" min-width="100">
          <template #default="{ row }"> {{ row.weight }}克 </template>
        </el-table-column>
        <el-table-column label="操作" min-width="100">
          <template #default>
            <el-button size="small" type="danger" @click="handleDelete">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- el-pagination 分页 -->
      <div class="pagination-wrapper">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <!-- 弹框底部（默认有，这里无需额外插槽）-->
  </el-dialog>
</template>

<script setup>
import { ref, reactive } from 'vue'

// 弹框显示控制
const dialogVisible = ref(false)
const props = defineProps(['modelValue'])
// 模拟数据
const selectedMaterial = ref('')
const duration = ref(1000) // 毫秒
const weight = ref(0) // 克
const selectedFilterMaterial = ref('')
const currentPage = ref(1)
const pageSize = ref(20)
const total = ref(23)

// 模拟物料列表数据（对应 el-table）
const materialList = ref([
  { code: 'M0023', name: '林里椰子水', time: 0, weight: 40 },
  { code: 'M0022', name: '林里椰子水', time: 0, weight: 40 },
  { code: 'M0021', name: '林里厚椰乳', time: 0, weight: 40 },
  { code: 'M0020', name: '林里椰树椰汁', time: 0, weight: 40 },
  { code: 'M0032', name: '林里五窨茉莉白毫茶', time: 0, weight: 40 },
  { code: 'M0029', name: '林里清新红茶', time: 0, weight: 40 },
  { code: 'M0019', name: '林里绿茶', time: 0, weight: 40 },
  { code: 'M0017', name: '林里山茶花', time: 0, weight: 40 },
  { code: 'M0016', name: '林里桃桃乌龙', time: 0, weight: 40 },
  { code: 'M0015', name: '林里泰式绿茶', time: 0, weight: 40 },
  // ... 更多数据可模拟填充至23条
])

// 简单方法
const increaseTime = () => duration.value++
const decreaseTime = () => duration.value > 0 && duration.value--
const increaseWeight = () => weight.value++
const decreaseWeight = () => weight.value > 0 && weight.value--

const handleSave = () => {
  console.log('保存：', {
    selectedMaterial: selectedMaterial.value,
    duration: duration.value,
    weight: weight.value,
  })
  // TODO: 调用接口保存
}

const handleQuery = () => {
  console.log('查询：', selectedFilterMaterial.value)
  // TODO: 根据筛选条件重新加载表格数据
}

const handleDelete = () => {
  console.log('删除某条记录')
  // TODO: 删除当前行数据，更新 materialList
}

const handleSizeChange = (val) => {
  pageSize.value = val
  // 重新加载数据
}

const handleCurrentChange = (val) => {
  currentPage.value = val
  // 重新加载数据
}

const handleBeforeClose = (done) => {
  done() // 直接关闭
}

// 暴露方法供父组件调用打开弹窗
defineExpose({
  openDialog: () => {
    props.modelValue.visible.value = false
  },
})
</script>

<style scoped lang="scss">
.tips {
  margin-bottom: 16px;
  color: #666;
  font-size: 14px;
  background-color: #fef4e1;
  padding: 6px 10px;
}
.top-section {
  margin-bottom: 24px;
}

.number-input-wrapper {
  display: flex;
  align-items: center;
}

.materials-section h3 {
  margin-bottom: 12px;
}

.list-controls {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.pagination-wrapper {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
  margin-bottom: 12px;
}
</style>
